import React, { Component } from 'react';
import {
  StyleSheet, View, Text, TouchableOpacity,
} from 'react-native';
import { Accordion } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Theme from '../native-base-theme/variables/commonColor';

class MyAccordion extends Component {
  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: 'row',
        padding: 8,
        marginTop: 8,
        marginLeft: 8,
        marginRight: 8,
        justifyContent: 'space-between',
        borderRadius: 4,
        alignItems: 'center',
        backgroundColor: 'rgba(255,255,255,0.2)',
      }}
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 5, justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>{item.description}</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
            <Text style={{ color: 'white' }}>({item.lubeType} 块)</Text>
          </View>
        </View>
        {expanded
          ? <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-up" />
          : <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-down" />}
      </View>
    );
  }

  _renderContent(item, toDetail) {
    return (
      <View style={{ backgroundColor: Theme.myPrimary, marginLeft: 8, marginRight: 8 }}>
        {
          item.datas.map((data, index) => (
            <TouchableOpacity onPress={() => this.props.toDetail(item.description, data.name)} key={index}>
              <Text style={{ padding: 8, color: 'white' }}>
                {data.name}：{data.num} 块
              </Text>
            </TouchableOpacity>
          ))
        }
      </View>
    );
  }

  render() {
    // const { datas } = this.props;
    return (
      <Accordion
        style={{ borderWidth: 0 }}
        dataArray={this.props.datas}
        renderHeader={this._renderHeader}
        renderContent={(item) => this._renderContent(item, this.toDetail)}
      />
    );
  }
}

export default MyAccordion;
